<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            font-size: 10px;
            background-color: white;
            font-family: "微软雅黑";
        }

        .header {
            width: 100%;
            height: 3rem;
            background-color: #cccccc;
        }

        .header .content {
            height: 3rem;
            width: 120rem;
            margin: 0 auto;
            font-size: 1.2rem;
        }

        .header .content .location {
            line-height: 3rem;
            float: left;
            display: block;
            width: 8rem;
        }

        .header .content ul {
            list-style: none;
            float: right;
            width: 65rem;
            margin: 0;
            padding: 0;
        }

        .header .content ul li {
            float: left;
            margin-top: 0.8rem;
            margin-bottom: 0.8rem;
            line-height: 1.4rem;
            width: 5rem;
            padding-right: 0.5rem;
            padding-left: 0.5rem;
            border-right: 0.1rem solid #333;
        }

        .header .content ul li:last-child {
            border-right: none;
            padding-right: 0;
        }

        .header .content ul li.login {
            width: 7.5rem;
        }

        .header .content ul li.mobile {
            width: 6rem;
        }

        .banner {
            position: relative;
            width: 100%;
            height: 8rem;
            background-image: url("images/topbanner.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

        .close-btn {
            position: absolute;
            /*相对于第一个position值非static的父元素布局*/
            right: 10rem;
            top: 1rem;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
            padding: 0.5rem;
            width: 1.2rem;
            height: 1.2rem;
            text-align: center;
        }

        .search-box {
            position: relative;
            width: 100%;
            height: 6rem;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        .search-box .content {
            position: relative;
            height: 3rem;
            width: 120rem;
            margin: 0 auto;
            font-size: 1.2rem;
        }

        .search-box .logo {
            background-image: url(images/logo.png);
            width: 27rem;
            height: 6rem;
            float: left;
            margin-right: 1rem;
        }

        .search-box .search {
            /*background-color: red;*/
            width: 60rem;
            height: 4rem;
            float: left;
        }

        .search-box .search input[type=text] {
            border: none;
            box-shadow: none;
            width: 39.5rem;
            height: 3.5rem;
            border: 0.25rem solid red;
            padding: 0;
            vertical-align: bottom;
        }

        .search-box .search input[type=text]+span {
            display: inline-block;
            background-color: red;
            width: 10rem;
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            color: white;
            padding: 0;
            margin: 0;
            margin-left: -1rem;
            vertical-align: bottom;
        }

        .search-box .hot-words {
            /*background-color: yellow;*/
            width: 50rem;
            height: 2rem;
            float: left;
        }

        .search-box .hot-words ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .search-box .hot-words ul li {
            float: left;
            padding-right: 2rem;
        }

        .search-box .hot-words ul li:first-child {
            color: red;
        }

        .car {
            position: absolute;
            width: 10rem;
            height: 3.5rem;
            top: 1rem;
            right: 3rem;
            border: 1px solid #ccc;
            line-height: 3.5rem;
            text-align: center;
            padding-left: 3rem;
            padding-right: 1rem;
        }

        .tubiao {
            background-image: url(images/sprite.png);
            background-repeat: no-repeat;
            background-position: 0 -6rem;
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 1rem;
            left: 0.6rem;
        }

        .number {
            border-radius: 50%;
            border-bottom-left-radius: 0;
            background-color: red;
            color: white;
            position: absolute;
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1;
            text-align: center;
        }

        .nav {
            width: 100%;
            height: 5rem;
            border-bottom: 0.4rem solid red;
        }

        .nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 120rem;
            margin: 0 auto;
        }

        .nav ul li {
            float: left;
            font-size: 2rem;
            letter-spacing: 0.1rem;
            padding: 1.2rem;
            padding-top: 1.5rem;
            padding-bottom: 0.8rem;
            height: 2.7rem;
        }

        .nav ul li.all {
            padding-left: 0.4rem;
            padding-right: 3rem;
            background-color: red;
            color: white;
            margin-left: -0.5rem;
        }

        .main {
            width: 100%;
            height: 40.3rem;
            background-image: url("images/banner.jpg");
            background-repeat: no-repeat;
            background-size: 192rem 60.3rem;
            background-position: center top;
        }

        .main .content {
            width: 120rem;
            margin: 0 auto;
            height: 60.3rem;
        }

        .main .content ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 16rem;
            margin-left: -0.5rem;
            float: left;
        }

        .main .content ul li {
            position: relative;
            margin: 0;
            padding: 0;
            background-color: red;
            height: 2.8rem;
            color: white;
            font-size: 1.4rem;
            padding-left: 0.6rem;
        }

        .main .content ul li span {
            position: absolute;
            right: 0.5rem;
        }

        .main .content .image {
            position: relative;
            float: left;
            width: 65.7rem;
            height: 41.1rem;
            margin-left: 5rem;
            margin-top: 0.2rem;
        }

        .main .content .image img {
            width: 100%;
            height: 100%;
        }

        .main .content .image ul {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            margin-left: -7.5rem;
            width: 15rem;
        }

        .main .content .image ul li {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            color: white;
            float: left;
            text-align: center;
            width: 2.5rem;
            height: 2.5rem;
            padding: 0;
            line-height: 2.5rem;
        }

        .main .content .image .left-btn {
            width: 2rem;
            background-color: rgba(0, 0, 0, 0.5);
            height: 4rem;
            color: white;
            position: absolute;
            left: 0;
            top: 50%;
            font-size: 1.6rem;
            line-height: 4rem;
            padding-left: 0.2rem;
            text-align: center;
            margin-top: -2rem;
        }

        .main .content .image .right-btn {
            width: 2rem;
            background-color: rgba(0, 0, 0, 0.5);
            height: 4rem;
            margin-top: -2rem;
            color: white;
            position: absolute;
            right: 0;
            top: 50%;
            font-size: 1.6rem;
            line-height: 4rem;
            padding-left: 0.2rem;
            text-align: center;
        }

        .main .content .right-box {
            float: left;
            margin-left: 4rem;
            width: 22rem;
            border: 1px solid #ccc;
            margin-top: 0.2rem;
        }

        .main .content .right-box h1 {
            font-size: 1.8rem;
            font-weight: normal;
            padding-left: 2rem;
            padding-bottom: 0.4rem;
            border-bottom: 1px solid #ccc;
        }

        .main .content .right-box h1 span {
            padding-left: 5rem;
            font-size: 1.4rem;
        }

        .main .content .right-box ul {
            background-color: white;
            float: none;
            margin: 0;
            padding: 0;
            position: static;
        }

        .main .content .right-box ul li {
            background-color: white;
            float: none;
            margin: 0;
            padding: 0;
            position: static;
            color: #333;
            width: 20rem;
            font-size: 1.2rem;
            padding-left: 1rem;
        }

        .main .content .right-box .life-box h1 {
            padding-top: 0.4rem;
            border-top: 1px dashed #ccc;
            border-bottom: 1px dashed #ccc;
        }

        .main .content .right-box .life-box table {
            border-collapse: collapse;
            margin: 0 auto;
        }

        .main .content .right-box .life-box table td {
            border: 1px solid #ccc;
            width: 5rem;
            height: 5rem;
            position: relative;
        }

        .main .content .right-box .life-box table td span {
            display: block;
            position: absolute;
            top: 1rem;
            width: 2rem;
            height: 2rem;
            background-image: url("images/sprite.png");
            background-repeat: no-repeat;
            background-position: 0.2rem -2.3rem;
            left: 50%;
            margin-left: -1rem;
        }

        .main .content .right-box .life-box table td span+span {
            display: block;
            width: 2rem;
            position: absolute;
            font-size: 1rem;
            bottom: 0.2rem;
            left: 50%;
            margin-left: -1rem;
            top: auto;
            background: none;
        }
        /*11 huodong*/
        a {
    color: #666;
    text-decoration: none;
}

        .night {
            margin: 10px 0 28px 0;
        }

        .todays {
            position: relative;
            height:20rem;
        }

        .w {
            width: 1210px;
            margin: 0 auto;
        }

         .night-l {
            width: 210px;
            height: 160px;
            float: left;
        }

        .night-r {
            width: 1000px;
            height: 160px;
            float: right;
        }

        .night-r ul {
            width: 500%;
            _width: 400%;
        }

        .night-r li {
            float: left;
            margin-right: 1px;
        }
        /*头部分end*/

        .slogen {
            height: 54px;
            padding: 20px 0;
            background-color: #f5f5f5;
            position: relative;
            margin-bottom: 15px;
        }

        .item {
            width: 302px;
            position: absolute;
            top: 20px;
            left: 50%;
        }

        .slogen1 {
            margin-left: -608px;
        }

        .slogen2 {
            margin-left: -304px;
        }

        .slogen3 {
            margin-left: 2px;
        }

        .slogen4 {
            margin-left: 304px;
        }

        .shopping dl {
            width: 198px;
            float: left;
        }

        .shopping dt,
        .coverage .dt {
            font-size: 16px;
            height: 28px;
            font-family: "微软雅黑";
            padding-top: 10px;
        }

        .shopping dd {
            height: 20px;
        }

        .coverage {
            float: right;
            width: 210px;
            height: 165px;
            background: url(/images/china.png) no-repeat left bottom;
        }

        .coverage .dd {
            margin-top: 10px;
        }

        .coverage p {
            line-height: 18px;
        }

        .looklook {
            text-align: right;
            margin-top: 5px;
        }

        .againw {
            border-top: 1px solid #E5E5E5;
            padding: 23px 0 30px 0;
            margin-top: 30px;
            text-align: center;
        }

        .links {
            height: 25px;
        }

        .links a {
            padding: 0 6px;
        }

        .copyright {
            line-height: 18px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="content">
            <div class="location"><span> 送至:北京</span><span class="fa fa-angle-down"></span></div>
            <ul>
                <li class="login">你好，请登录 </li>
                <li>免费注册</li>
                <li>我的订单</li>
                <li>我的京东</li>
                <li>京东会员</li>
                <li>企业采购</li>
                <li class="mobile"><span class="fa fa-mobile"></span>手机京东</li>
                <li> 关注京东</li>
                <li> 客户服务</li>
                <li>网站导航</li>
            </ul>
        </div>
    </div>

    <div class="banner">
        <div class="close-btn">
            X
        </div>
    </div>

    <div class="search-box">
        <div class="content">
            <div class="logo">
            </div>
            <div class="search">
                <input type="text" />
                <span>搜索</span>
            </div>
            <div class="hot-words">
                <ul>
                    <li>热词1</li>
                    <li>热词2</li>
                    <li>热词3</li>
                    <li>热词4</li>
                    <li>热词5</li>
                </ul>
            </div>
            <div class="car">
                <div class="tubiao"></div>
                俺的购物车
                <span class="number">8</span>
            </div>
        </div>

    </div>

    <div class="nav">
        <ul>
            <li class="all">全部商品分类</li>
            <li>服装城</li>
            <li>美妆馆</li>
            <li>超市</li>
            <li>全球购</li>
            <li>闪购</li>
            <li>团购</li>
            <li>拍卖</li>
            <li>金融</li>
            <li>智能</li>
        </ul>
    </div>


    <div class="main">
        <div class="content">
            <ul>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li> 家用电器<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
                <li>手机、数码、京东通信<span>></span></li>
            </ul>

            <div class="image">
                <img src="images/11.jpg"></img>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
                <div class="left-btn">
                    &lt;
                </div>
                <div class="right-btn">
                    &gt;
                </div>
            </div>
            <div class="right-box">
                <div class="news-box">
                    <h1>京东快报 <span>更多</span></h1>
                    <ul>
                        <li>[特惠]1元秒杀</li>
                        <li> [公告]母婴类APP【京东宝宝】上线</li>
                        <li> [特惠]美的品牌日APP嗨购大放“价”</li>
                        <li> [公告]京东深入蒙牛生产基地进行质检 </li>
                        <li>[特惠]白条购家电 24期免息！</li>
                    </ul>
                </div>
                <div class="life-box">
                    <h1>生活服务</h1>
                    <table>
                        <tr>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                        </tr>
                        <tr>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                        </tr>
                        <tr>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                            <td><span></span><span>话费</span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="w todays clearfix">
        <div class="night">
            <div class="night-l fl">
                <img src="images/night.jpg" alt="" />
            </div>
            <div class="night-r">
                <ul>
                    <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
                    <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--页面底部开始-->
    <div class="jd-footer">
        <div class="service">
            <!--服务模块-->
            <div class="slogen">
                <span class="item slogen1">
                <img src="images/slogen1.png" alt=""/>
            </span>
                <span class="item slogen2">
                <img src="images/slogen2.png" alt=""/>
            </span>
                <span class="item slogen3">
                <img src="images/slogen3.png" alt=""/>
            </span>
                <span class="item slogen4">
                <img src="images/slogen4.png" alt=""/>
            </span>

            </div>
            <div class="w shopping clearfix">
                <dl>
                    <dt><a href="#">购物指南</a></dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">购物指南</a></dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">购物指南</a></dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">购物指南</a></dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">购物指南</a></dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <div class="coverage">
                    <div class="dt">京东自营覆盖区县</div>
                    <div class="dd">
                        <p> 京东已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
                        <p class="looklook"><a href="#">查看详情 ></a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
      
</body>

</html>